import React, { useEffect, useState } from 'react';
import { getNewsList } from '../../api/news';
import { Space, Tag, Pagination } from 'antd';

const { CheckableTag } = Tag;
const tagsData = ['综合新闻', '通知公告', '媒体聚焦', '教学科研', '基层动态'];
/**
 * const tagsData = [
 * 		{
 * 			label:'综合新闻',
 * 			id:''
 * 		}
 * ]
*/


const Home = () => {
	const [list,setList] = useState([]);
	const [totalPages,setTotalPages] = useState(1);
	const [primary,setPrimary] = useState(1);//设置默认的页码，当进入不同的标签页时，保持默认页码为1

	const [selectedTags, setSelectedTags] = useState(['综合新闻']);//设置默认的标签页

	useEffect(() => {
		changePage(selectedTags[0],1);//默认进入的是哪个标签页就初始加载哪个标签页对应的内容，一般为“综合新闻”

		/**
		 * getNewsList()
		*/

	},[])//,[selectTags,page]  监听Tag的id的变化，根据不同的id去发对应的请求 只要page发生变化，就会重新发请求

	const changePage = (tag, page) => {//根据不同标签页对应的类型，选择不同的请求参数
		switch (tag) {
			case '综合新闻':
				getNewsList(page).then(res => { //getNewsList({page:1,newsType:selectTags})
					setList(res.data.content)
					setTotalPages(res.data.totalElements)
				})
				break;
			case '通知公告':
				getNewsList(page,2).then(res => {
					setList(res.data.content)
					setTotalPages(res.data.totalElements)
				})
				break;
			case '媒体聚焦':
				getNewsList(page,3).then(res => {
					setList(res.data.content)
					setTotalPages(res.data.totalElements)
				})
				break;
			case '教学科研':
				getNewsList(page,4).then(res => {
					setList(res.data.content)
					setTotalPages(res.data.totalElements)
				})
				break;
			case '基层动态':
				getNewsList(page,5).then(res => {
					setList(res.data.content)
					setTotalPages(res.data.totalElements)
				})
				break;
		}
	}

  	const handleChange = (tag, checked) => {
		if(checked === true) {
			setSelectedTags(tag);

			changePage(tag,1)//最初进入某个标签页时页码默认为1
			setPrimary(1)
		}

		/**
		 * setSelectTags(tag.id)
		*/
  	}

	const handlePage = (current,selectedTags) => {
		setPrimary(current)
		changePage(selectedTags,current)//传入选择的页码和当前所在的标签页
	}

  	return (
		<>
		<Space size={[0, 8]} wrap>
			{
				tagsData.map((tag) => (
					<CheckableTag
						key={tag}
						/*key={tag.id}*/
						checked={selectedTags.includes(tag)}
						/*checked={selectedTags === tag.id}*/
						onChange={(checked) => handleChange(tag, checked)}
					>
						{tag}
						{/*tag.label*/}
					</CheckableTag>
				))
			}
		</Space>
		<ul style={{marginTop:50}}>
			{
				list.map(item => {
					return <li style={{margin:20}} key={item.id}>{item.newsTitle}</li>
				})
			}
		</ul>

		<Pagination style={{marginTop:50}} defaultCurrent={1} current={primary} total={totalPages} onChange={(current) => handlePage(current,selectedTags[0])} />
		</>
	)
}

export default Home